<template>
  <view class="cm-card" :class="[cardClasses, cmClass]" :style="[cmStyle]">
    <view class="cm-card-header">
      <!-- 通常卡片样式，由左端的标题和右端的灰色小标文字构成 -->
      <view class="cm-card-common-head cm-flex cm-flex-j-between cm-flex-a-center cm-padding-10 app-border-color_ex-bottom"
        v-if="headMode === 'standard'">
        <view class="cm-flex cm-flex-a-center">
          <cm-icon cm-class="cm-margin-right-3" v-if="titleIcon !== ''" size="20" v-bind:type="titleIcon"></cm-icon>
          <text class="cm-text-16">{{ title }}</text>
        </view>
        <text class="cm-text-14 app-text-color-grey" v-if="extra !== ''" @click="extraClickHandler">{{ extra }}</text>
        <slot name="extra" v-else></slot>
      </view>
      <slot name="header" v-else></slot>     
    </view>
    <view class="cm-card-content">
      <slot></slot>
    </view>
    <view class="cm-card-footer app-border-color_ex-top" v-if="footerEnabled">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script src="./cm-card.js"></script>

<style lang="stylus">
@import './cm-card.styl'
</style>